<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/jquery.min.js"></script>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.js"></script>

    <script>
        function searcha() {
            //返回表格的 Options。
            var opts = $("#chanpinxiangmu").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/chanpin/queryByName",{'name':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#chanpinxiangmu").bootstrapTable('load',data) ;
            })
        }

        $(function () {

            <!--校验框架-->
            $(function () {
                $('#jy').bootstrapValidator({
                    message: '',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        shangpin_Name: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '商品名称不能为空！'
                                }
                            }
                        },
                        shangpin_Shoujia: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '商品售价不能为空！'
                                },
                                digits: {
                                    message: '商品售价只能为整数或者小数！'
                                }
                            }
                        }
                    }
                });
            });



            $("#chanpinxiangmu").bootstrapTable({
                url:'${pageContext.request.contextPath}/chanpin/queryByName',
                //设置每页多少条数据
                pageSize:3,
                pageList:[3,5,8],
                height:380,
                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',

                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'shangpin_Id',
                        title:'商品编号',
                        align:'center'
                    },
                    {
                        field:'shangpin_Name',
                        title:'商品名称',
                        align:'center'
                    },
                    {
                        field:'shangpin_Shoujia',
                        title:'商品售价',
                        align:'center'
                    },
                    {
                        field:'shangpinFenlei_Name',
                        title:'商品分类',
                        align:'center'
                    },
                    {
                        field:'chanpindanwei_Name',
                        title:'单位',
                        align:'center'
                    },
                    {
                        field:'guige',
                        title:'规格',
                        align:'center'
                    },
                    {
                        field:'zhuangtai_Name',
                        title:'状态',
                        align:'center'
                    },
                    {
                        field:'taocanleixing_Name',
                        title:'是否套餐',
                        align:'center'
                    },
                    {
                        title:'操作',
                        align:'center',
                        formatter:function(value,row,index){
                            return "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                "style='background-color: red;color: white;border:1px solid red;height:35px;" +
                                "font-size: 14px' onclick='javascript:del("+row.shangpin_Id+")'><span style='margin-top: 1px' class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\" title='删除'><p style='float:right;margin-top: -1px'>删除</p></span></button>"+
                                "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                " style='margin-left: 10px;height:35px;font-size: 14px;' onclick='javascript:ud("+row.shangpin_Id+")'><span style='margin-top: 1px' class=\"glyphicon glyphicon-pencil\" aria-hidden=\"true\" title='修改'><p style='float:right;margin-top: -1px'>修改</p></span></button>"
                        }
                    }],
            }) ;
        }) ;

        /**
         * 根据id删除服务信息
         */
        var kids;
        function del(kids){
            shangpin_Id=kids;
            $("#sc").modal('show');
        }
        function dodelete(){
            $.post('${pageContext.request.contextPath}/chanpin/shanchu',{shangpin_Id:shangpin_Id},function(data){
                if(data!=null){
                    searcha();
                    $("#sc").modal('hide');
                }
            })
        }

        /**
         * 添加产品信息
         */
        function add() {
            $("#Div1").modal("show");
        }
        function doadd(){
            var shangpin_Name=$('[name=shangpin_Name]').val();
            var shangpin_Shoujia=$('[name=shangpin_Shoujia]').val();
            var shangpin_Fenlei=$('[name=shangpin_Fenlei]').val();
            var danwei=$('[name=danwei]').val();
            var dp_Xianzhi=$('[name=dp_Xianzhi]').val();
            var guige=$('[name=guige]').val();
            var zhuangtai=$('[name=zhuangtai]:checked').val();
            var sf_Taocan=$('[name=sf_Taocan]:checked').val();
            var beizhu=$('[name=beizhu]').val();
            $.post('${pageContext.request.contextPath}/chanpin/insert',{shangpin_Name:shangpin_Name,shangpin_Shoujia:shangpin_Shoujia,shangpin_Fenlei:shangpin_Fenlei,danwei:danwei,dp_Xianzhi:dp_Xianzhi,guige:guige,zhuangtai:zhuangtai,sf_Taocan:sf_Taocan,beizhu:beizhu},function (data) {
                if (data!=null){
                    searcha();
                    $("#Div1").modal('hide');
                } else {
                    alert("增加失败");
                }
            })
        }

        /**
         * 根据产品id修改产品信息
         * @type {number}
         */
        var shangpin_Id=0;
        function ud(id){
            shangpin_Id=id;
            $("#Div2").modal('show');
            //发送post请求
            $.post('${pageContext.request.contextPath}/chanpin/queryId',{shangpin_Id:shangpin_Id},function (data) {
                //给表单赋值
                $("[name=shangpin_NameG]").val(data.shangpin_Name);
                $("[name=shangpin_ShoujiaG]").val(data.shangpin_Shoujia);
                $("[name=shangpin_FenleiG]").val(data.shangpin_Fenlei);
                $("[name=danweiG]").val(data.danwei);
                $("[name=dp_XianzhiG]").val(data.dp_Xianzhi);
                $("[name=guigeG]").val(data.guige);
                $("[name=zhuangtaiG]:checked").val(data.zhuangtai);
                $("[name=sf_TaocanG]:checked").val(data.sf_Taocan);
                $("[name=beizhuG]").val(data.beizhu);
            })
        };
        function doupdate(){
            var shangpin_NameG=$("[name=shangpin_NameG]").val();
            var shangpin_ShoujiaG=$("[name=shangpin_ShoujiaG]").val();
            var shangpin_FenleiG=$("[name=shangpin_FenleiG]").val();
            var danweiG=$("[name=danweiG]").val();
            var dp_XianzhiG=$("[name=dp_XianzhiG]").val();
            var guigeG=$("[name=guigeG]").val();
            var zhuangtaiG=$("[name=zhuangtaiG]:checked").val();
            var sf_TaocanG=$("[name=sf_TaocanG]:checked").val();
            var beizhuG=$("[name=beizhuG]").val();
            $.post('${pageContext.request.contextPath}/chanpin/update',{shangpin_Id:shangpin_Id,shangpin_Name:shangpin_NameG,shangpin_Shoujia:shangpin_ShoujiaG,shangpin_Fenlei:shangpin_FenleiG,danwei:danweiG,dp_Xianzhi:dp_XianzhiG,guige:guigeG,zhuangtai:zhuangtaiG,sf_Taocan:sf_TaocanG,beizhu:beizhuG},function(data){
                if(data!= null){
                    searcha();
                    alert("修改成功！")
                    $("#Div2").modal('hide');
                }else{
                    alert("修改失败！");
                }
            })
        }

    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">产品管理</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="add()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    商品关键字：<input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="chanpinxiangmu"></table>
            </div>
        </div>

    </div>
</div>

<!---删除模态框-->
<div class="modal fade" id="sc">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="addrole" style="height: 100px">
                        <p>确认删除信息吗？</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"onclick="dodelete()">删除</button>
            </div>
        </div>
    </div>
</div>

<!--添加-->
<div class="ibox-content">
    <div class="modal inmodal" id="Div1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">添加在售商品</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="jy">
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">商品名称:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="shangpin_Name" class="form-control" id="title1" placeholder="请输入商品名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">商品售价:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="shangpin_Shoujia" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">规   格:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="guige" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="shangpin_Fenlei" class="col-sm-2 control-label">所属分类:</label>
                            <div class="col-sm-10">
                                <div class="col-sm-6">
                                    <select name="shangpin_Fenlei" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                        <option value="1">洗发水</option>
                                        <option value="2">吹风机</option>
                                        <option value="3">洗护用品</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="danwei" class="col-sm-2 control-label">单   位:</label>
                            <div class="col-sm-10">
                                <div class="col-sm-6">
                                    <select name="danwei" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                        <option value="1">瓶</option>
                                        <option value="2">支</option>
                                        <option value="3">套</option>
                                        <option value="4">次</option>
                                        <option value="5">副</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="dp_Xianzhi" class="col-sm-2 control-label">店铺限制:</label>
                            <div class="col-sm-10">
                                <div class="col-sm-6">
                                    <select name="dp_Xianzhi" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                        <option value="1">启用店铺</option>
                                        <option value="2">禁用店铺</option>
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="zhuangtai" class="col-sm-2 text-right">状态:</label>
                            <div class="col-sm-8">
                                <div class="radio-inline" style="margin-top: -8px">
                                    <input type="radio" name="zhuangtai" value="1" checked="checked" style="margin-top: 2px">
                                    启用
                                </div>

                                <div class="radio-inline" style="margin-top: -8px">
                                    <input type="radio" name="zhuangtai" value="2" style="margin-top: 2px">
                                    禁用
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="sf_Taocan" class="col-sm-2 text-right">是否套餐:</label>
                            <div class="col-sm-8">
                                <div class="radio-inline" style="margin-top: -8px">
                                    <input type="radio" name="sf_Taocan" value="1" checked="checked" style="margin-top: 2px">
                                    是
                                </div>

                                <div class="radio-inline" style="margin-top: -8px">
                                    <input type="radio" name="sf_Taocan" value="2" style="margin-top: 2px">
                                    否
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="beizhu" class="col-sm-2 control-label">备注:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="beizhu"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入备注">
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary"  onclick="doadd()">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--修改-->
<!--沿X轴转动-->
<div class="modal inmodal" id="Div2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">修改在售产品</h4>
            </div>
            <%--修改模态框--%>
            <div class="modal-body">
                <form class="form-horizontal" method="post">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">商品名称:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="shangpin_NameG" class="form-control" id="title" placeholder="请输入商品名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">商品售价:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="shangpin_ShoujiaG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">规   格:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="guigeG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">所属分类:</label>
                        <div class="col-sm-10">
                            <div class="col-sm-6">
                                <select name="shangpin_FenleiG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                    <option value="1">洗发水</option>
                                    <option value="2">吹风机</option>
                                    <option value="3">洗护用品</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">单   位:</label>
                        <div class="col-sm-10">
                            <div class="col-sm-6">
                                <select name="danweiG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                    <option value="1">瓶</option>
                                    <option value="2">支</option>
                                    <option value="3">套</option>
                                    <option value="4">次</option>
                                    <option value="5">副</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">店铺限制:</label>
                        <div class="col-sm-10">
                            <div class="col-sm-6">
                                <select name="dp_XianzhiG" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                    <option value="1">启用店铺</option>
                                    <option value="2">禁用店铺</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="title" class="col-sm-2 text-right">状态:</label>
                        <div class="col-sm-8">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="zhuangtaiG" value="1" checked="checked" style="margin-top: 2px">
                                是
                            </div>

                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="zhuangtaiG" value="2" style="margin-top: 2px">
                                否
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 text-right">是否套餐:</label>
                        <div class="col-sm-8">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sf_TaocanG" value="1" checked="checked" style="margin-top: 2px">
                                启用
                            </div>

                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sf_TaocanG" value="2" style="margin-top: 2px">
                                禁用
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">备注:</label>
                        <div class="col-sm-9">
                            <input  type="text" name="beizhuG"  class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="请输入备注">
                        </div>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary"  onclick="doupdate()">保存</button>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>
</div>

</body>
</html>
